<template>
    <view>
        <view class="tips">
            <view class="title">{{ isLogin ? '邮箱验证' : '修改密码'}}</view>
        </view>
        <u-form :model="emailParams" v-show="isPassword">
            <view class="container-input">
                <u-form-item>
                    <input placeholder="请输入邮箱" v-model="emailParams.email" placeholderStyle="color: #c0c4cc" style="height: 25px;"></input>
                </u-form-item>
            </view>
			<view  class="yzm-input" style="margin-top: 40rpx;">
				<view class="eye-input" style="padding: 10px 16px;">
					<input  placeholder="请输入验证码" v-model="emailParams.code" 
						placeholderStyle="color: #c0c4cc" style="height: 25px;padding-right: 64rpx;width: 70%;">
					</input>
					</view>
					<view class="yzm">
					<up-button text="获取验证码" shape="circle" style="right: -40%;width: 30%;margin-top: -11%;" color="#5cd3bb"></up-button>
					</view>
			</view>
        </u-form>
        <view v-if="isLogin" class="container-bth" @click="next">下一步</view>
		
		<u-form :model="passwordParams" v-show="!isPassword">
		<view   class="container-input" style="margin-top: 40rpx;">
			<view class="eye-input" style="padding: 10px 0;">
				<input :password="pwdOpen" placeholder="请输入新密码" v-model="passwordParams.password" 
					placeholderStyle="color: #c0c4cc" style="height: 25px;padding-right: 64rpx;width: 100%;">
				</input>
				<view class="eye-image">
					<up-icon v-if="!eyeOpen && passwordParams.password" name="eye-fill"  @click="tabEyeClose"></up-icon>
					<up-icon v-if="eyeOpen && passwordParams.password" name="eye-off"  @click="tabEyeOpen"></up-icon>
				</view>
			</view>
		</view>
		<view  class="container-input" style="margin-top: 40rpx;">
			<view class="eye-input" style="padding: 10px 0;">
				<input :password="pwdOpen" placeholder="请再次输入新密码" v-model="passwordParams.password" 
					placeholderStyle="color: #c0c4cc" style="height: 25px;padding-right: 64rpx;width: 100%;">
				</input>
				<view class="eye-image">
					<up-icon v-if="!eyeOpen && passwordParams.password" name="eye-fill"  @click="tabEyeClose"></up-icon>
					<up-icon v-if="eyeOpen && passwordParams.password" name="eye-off"  @click="tabEyeOpen"></up-icon>
				</view>
			</view>
		</view>
		</u-form>
		<view v-if="!isPassword" class="container-bth" @click="modify">确定</view>
    </view>
</template>
 
<script setup>
import { ref, reactive } from 'vue'

//import { accountLoginStudent } from "@/api/login/login.js"
 
 const isPassword = ref(true)
 
 const isLogin = ref(true) // 区分邮箱验证和修改密码
 
 const radioShow = ref(true)
 
  const eyeOpen = ref(false)
  
  const pwdOpen = ref(true)
  
    const emailParams = reactive({ //邮箱验证
          email: '',
          code: ''
        });
		
		const passwordParams = reactive({ //修改密码
		      password: '',
		      repassword: ''
		    });
		
		const code = () => {
			isPassword.value = false
		}
		
		const isCode = () => {
			isPassword.value = true
		}
    
        // 注册逻辑（参考证据[[1,5]]的验证流程）
        const register = () => {
          if (!radioShow.value) {
            toast.show('用户协议和隐私政策未勾选');
          } else if (!userInfo.username) {
            toast.show('请填写账号');
          } else if (!userInfo.password) {
            toast.show('请输入密码');
          } else {
            isLogin.value = true;
            userInfo.password = '';
            userInfo.username = '';
            setTimeout(() => {
              toast.show('注册成功');
            }, 500);
          }
        };
    
        // 登录逻辑（参考证据[[3,7]]的认证流程）
        const next = () => {
         isPassword.value = false
		 isLogin.value = false
        };
    
        // 其他方法（参考证据[[4]]的状态管理）
        const checkBtn = () => {
          isLogin.value = !isLogin.value;
          userInfo.username = '';
          userInfo.password = '';
          eyeOpen.value = false;
          pwdOpen.value = true;
        };

</script>
 
<style>
	page {
		background: linear-gradient(270deg, #E1ECFE 0%, #DDFCFF 100%);
	}
</style>
 
<style lang="scss" scoped>
	.tips {
		margin: 110rpx 0 100rpx 0;
		width: 100%;
		text-align: center;
		.title {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			letter-spacing: 2rpx;
			color: #26344D;
		}
		.sub-title {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			letter-spacing: 2rpx;
			color: #26344D;
			margin-top: 10rpx;
		}
	}
	.container-input {
		margin: 0 40rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		.eye-input {
			width: 100%;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.eye-image {
				position: absolute;
				right: 0;
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
				flex-shrink: 0;
			}
		}
	}
	.yzm-input {
		justify-content: space-around;
		margin: 0 40rpx;
			
		.eye-input {
			width: 65%;
			background-color: #fff;
			border-radius: 16rpx;
		}
		.yzm {
			margin-left: 10px;
		}
}
		.agree-title {
			margin-left: 20px;
			font-size: 26px;
			color: #333;
		}
	.container-bth {
		margin: 0 40rpx;
		border-radius: 16rpx;
		height: 88rpx;
		background-color: #5990F5;
		margin-top: 60rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		line-height: 88rpx;
		letter-spacing: 2rpx;
	}
	.forget-pwd {
		font-size: 28rpx;
		font-family: MiSans-Regular, MiSans;
		color: #5990F5;
	}
	.flex-between {
		display: flex;
		justify-content:space-between;
	}
</style>